<template>
  <view>
    <uv-popup ref="popup" round="20">
      <view class="popup-container">
        <view class="popup-header">
          <view class="left"></view>
          <p class="center">预约现场带看</p>
          <view class="right">
            <uv-icon class="right" name="close" @click="popupClose"></uv-icon>
          </view>
        </view>
        <view class="popup-main">
          <view class="tips">
            <image class="reserve-icon" :src="$CDN('/customer/static/images/icons/icon-reserve.png')" alt="" />
            <div style="flex: 1; line-height: 32rpx">提交预约后门店专属管家会电话联系您, 请保持手机通畅</div>
          </view>
          <view class="seeHouseList">
            <view class="date-title">选择看房时间</view>
            <view class="date-list">
              <view
                v-for="(item, index) in dateList"
                :key="index"
                :class="['date-item', dateActive === index && item.can_reserve ? 'active-item' : 'date-item', !item.can_reserve ? 'no-edit' : '']"
                @click="handleDateItem(index, item)"
              >
                <span class="weekName">{{ item.weekName }}</span>
                <span class="show_date">{{ item.show_date }}</span>
              </view>
            </view>
            <view class="house-list">
              <view
                v-for="(item, index) in houseList"
                :key="index"
                :class="['house-item', timeActive === index && item.canSelect ? 'active-item' : 'house-item', !item.canSelect ? 'no-edit' : '']"
                @click="handleTimeItem(index, item)"
              >
                <span class="point">{{ item.point }}</span>
              </view>
            </view>
          </view>
        </view>
        <view class="button-wrap">
          <view class="button cancel" @click="handleSubmit">立即预约</view>
        </view>
      </view>
    </uv-popup>
    <!-- 弹出预约成功 -->
    <claim-coupons-popup ref="ref-claim-coupons" />
    <uv-modal ref="uv-modal" :content="content" :showCancelButton="true" cancelText="取消" @confirm="confirmModal" confirmText="确定更改"></uv-modal>
  </view>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { commitSeeHouse, getReserveTimes, seeHouseParams } from './../api.js'
import claimCouponsPopup from './claim-coupons-popup.vue'

export default {
  name: 'componentName',
  components: { claimCouponsPopup },
  mixins: [],
  props: {},
  data() {
    return {
      dateActive: undefined,
      timeActive: undefined,
      period: '',
      dateList: [],
      houseList: [],
      isRepeat: false,
      content: '',
      replace: 0,
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {},
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    open() {
      this.$refs.popup.open('bottom')
      this.getReserveTimes()
    },

    async getReserveTimes() {
      const { projectId } = this.$Route.query
      const { data } = await getReserveTimes({ project_id: projectId })
      let isDate = false
      let isTime = false
      let isFirstTimeList = false
      this.dateList = data.seeHouseList.map((v, i) => {
        if (v.can_reserve === 1 && !isFirstTimeList) {
          isFirstTimeList = true
          this.houseList = v.time_point
        }
        if (!isDate) {
          if (v.can_reserve) {
            this.dateActive = i
            isDate = true
          }
        }
        if (!isTime) {
          for (let k in v.time_point) {
            if (v.time_point[k].canSelect === 1) {
              this.timeActive = k * 1
              this.period = v.time_point[k].period
              isTime = true
              break
            }
          }
        }
        return {
          show_date: v.show_date,
          weekName: v.weekName,
          can_reserve: v.can_reserve,
          time_point: v.time_point,
        }
      })
      console.log('123', this.dateList)
    },
    handleDateItem(index, item) {
      if (!item.can_reserve) {
        return
      }
      this.dateActive = index
      this.timeActive = ''
      this.period = ''
      this.houseList = item.time_point
    },
    handleTimeItem(index, item) {
      if (item.canSelect) {
        this.timeActive = index
        this.period = item.period
      }
    },
    async handleSubmit() {
      if (!this.period) {
        uni.$uv.toast('请选择预约时间段')
        return
      }
      const { projectId, roomTypeId } = this.$Route.query
      const params = {
        projectId: projectId,
        roomTypeId: roomTypeId,
      }
      const { data } = await seeHouseParams(params)
      const { customer } = data
      const commitParams = {
        tel: customer.phone,
        see_time: this.period,
        room_type_id: roomTypeId || '',
        project_id: projectId,
        replace: this.replace,
      }
      const { errcode, data: couponData, errmsg } = await commitSeeHouse(commitParams)
      if (errcode === 0) {
        // if (couponData.errcode === 30003) {
        //   uni.$uv.toast(couponData.errmsg)
        //   this.isRepeat = true
        //   return
        // } else if (couponData.errcode === 30009) {
        //   this.content = couponData.data.content_text
        //   this.$refs['uv-modal'].open()
        //   return
        // } else {
        const { get_coupon, reserve_id } = couponData
        uni.$uv.toast('预约成功')
        this.$refs.popup.close()
        this.$refs['ref-claim-coupons'].open(get_coupon, reserve_id)
        // }
      } else if (errcode === 30003) {
        uni.$uv.toast(errmsg)
        this.isRepeat = true
      } else if (errcode === 30009) {
        this.content = errmsg
        this.$refs['uv-modal'].open()
      } else {
        uni.$uv.toast(errmsg)
      }
    },
    popupClose() {
      this.$refs.popup.close()
    },
    confirmModal() {
      this.replace = 1
      this.handleSubmit()
    },
  },
}
</script>

<style lang="scss" scoped>
.popup-container {
  width: 100%;
  height: 1000rpx;
  box-sizing: border-box;
  padding: 35rpx 32rpx 140rpx;
  .popup-header {
    display: flex;
    justify-content: space-between;
    .left {
      width: 32rpx;
      visibility: hidden;
    }
    .center {
      font-weight: bold;
      font-size: 16px;
      color: #333333;
      line-height: 16px;
    }
    .right {
      image {
        width: 50rpx;
        height: 50rpx;
      }
    }
  }
  .popup-main {
    padding: 20rpx 0;
    .tips {
      display: flex;
      padding: 25rpx 4rpx 16rpx 24rpx;
      box-sizing: border-box;
      background: #f5f5f5;
      border-radius: 16rpx;
      font-size: 24rpx;
      .reserve-icon {
        width: 32rpx;
        height: 32rpx;
        margin-right: 8rpx;
      }
    }
    .seeHouseList {
      .date-title {
        margin: 20rpx 0;
      }
      .date-list {
        width: 100%;
        overflow-y: scroll;
        display: flex;
        .date-item {
          box-sizing: border-box;
          padding: 40rpx;
          white-space: nowrap;
          display: flex;
          flex-direction: column;
          border-radius: 8rpx;
          background: #f5f5f5;
          margin-right: 8px;
          .weekName {
            font-size: 28rpx;
            font-weight: bold;
            margin-bottom: 4rpx;
          }
          .show_date {
            font-size: 24rpx;
            color: #999999;
          }
        }
        .no-edit {
          color: #cccccc;
        }
        .active-item {
          background: $uv-primary;
          color: white;
          .show_date {
            color: white;
          }
        }
      }
      .house-list {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20rpx;
        box-sizing: border-box;
        padding: 30rpx;
        background: #f5f5f5;
        border-radius: 8rpx;
        .house-item {
          width: calc(25% - 16rpx);
          padding: 10rpx 0rpx;
          border: 2rpx solid white;
          background: white;
          border-radius: 16rpx;
          margin: 0 12rpx 12rpx 0;
          text-align: center;
          &:nth-child(4n) {
            margin-right: 0;
          }
        }
        .no-edit {
          color: #cccccc;
        }
        .active-item {
          background: #edf6f9;
          border-color: $uv-primary;
          color: $uv-primary;
        }
      }
    }
  }
  .button-wrap {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    width: calc(100% - 32px);
    padding: 0 32rpx 32rpx;
    .button {
      font-weight: 400;
      font-size: 28rpx;
      padding: 24rpx 0;
      border-radius: 200rpx;
      text-align: center;
      width: 100%;
      font-size: 28rpx;
      font-weight: bold;
      color: #ffffff;
      background: $uv-primary;
    }
  }
}
</style>
